<script setup lang="ts">
import * as echarts from 'echarts';
import { EChartsOption } from 'echarts';
import { ProjectForm } from '@/api/exam/project/types';

interface Props {
  projectForm: any | ProjectForm;
  answerList: any;
  segmentedValue: string;
}

const props = withDefaults(defineProps<Props>(), {
  segmentedValue: '',
  projectForm: {
    survey: {
      children: []
    }
  },
  answerList: []
});
const projectForm = ref<ProjectForm>(props.projectForm);
const answerList = ref<any>(props.answerList);
watch(() => props.segmentedValue, () => {
  projectForm.value = props.projectForm;
  answerList.value = props.answerList;

});
// 分数分析
// 总分区间配置
const SCORE_LEVELS = [
  { name: '不及格', min: 0, max: 59, color: '#FF6B6B' },
  { name: '及格', min: 60, max: 79, color: '#4ECDC4' },
  { name: '良好', min: 80, max: 89, color: '#45B7D1' },
  { name: '优秀', min: 90, max: 1000, color: '#96CEB4' }
];

// 表格列配置
const scoreColumns = ref<any>([
  { title: '分数段', dataIndex: 'name', align: 'center' },
  { title: '数据量', dataIndex: 'count', align: 'center' },
  { title: '占比', dataIndex: 'percentage', align: 'center' }
]);

// 总分分布图表相关
const totalScoreChartRef = ref<HTMLElement>();
let totalScoreChart: echarts.ECharts | null = null;

// 计算项目总分
const totalScore = computed(() =>
  projectForm.value.survey.attribute.examScore || 0
);

// 分数段配置
const scoreLevels = [
  { name: '不及格', minRatio: 0, maxRatio: 0.6 },
  { name: '及格', minRatio: 0.6, maxRatio: 0.7 },
  { name: '良好', minRatio: 0.7, maxRatio: 0.8 },
  { name: '优秀', minRatio: 0.8, maxRatio: 1 }
];

// 计算分数段数据
const totalScoreData = computed(() => {
  const levels = scoreLevels.map(level => ({
    ...level,
    min: totalScore.value * level.minRatio,
    max: totalScore.value * level.maxRatio,
    count: 0
  }));

  answerList.value.forEach(answer => {
    const score = answer.examScore;
    for (const level of levels) {
      if (
        (score >= level.min && score < level.max) ||
        (level.maxRatio === 1 && score === level.max)
      ) {
        level.count++;
        break;
      }
    }
  });

  return levels.map(level => ({
    name: `${level.name} (${level.min.toFixed(1)}-${level.max.toFixed(1)})`,
    count: level.count,
    percentage: answerList.value.length === 0 ? '0%' :
      `${((level.count / answerList.value.length) * 100).toFixed(1)}%`
  }));
});

function updateChart() {
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: ({ name, value, percent }: any) =>
        `${name}<br/>数量: ${value}<br/>占比: ${percent}%`
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      name: '总分分布',
      type: 'pie',
      radius: '50%',
      data: totalScoreData.value.map(item => ({
        name: item.name,
        value: item.count
      })),
      label: {
        formatter: '{b}: {d}%'
      }
    }]
  };
  totalScoreChart?.setOption(option);
}



onMounted(async () => {
  if (totalScoreChartRef.value) {
    totalScoreChart = echarts.init(totalScoreChartRef.value);
    updateChart();
  }
});
</script>

<template>
  <!-- 总分分布 -->
  <div class="score-section">
    <h2>总分分布</h2>
    <a-row :gutter="24">
      <a-col :span="12">
        <div ref="totalScoreChartRef" style="height: 300px"></div>
      </a-col>
      <a-col :span="12">
        <a-table
          :columns="scoreColumns"
          :data-source="totalScoreData"
          :pagination="false" size="small"
          bordered
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'percentage'">
              {{ record.percentage }}
            </template>
          </template>
        </a-table>
      </a-col>
    </a-row>
  </div>



</template>

<style scoped lang="scss">

</style>
